import React,{ Component, PropsType } from 'react';
import styles from './WriteOnlyMeeting.css';
import { DatePicker,Select,Input,Button,Popconfirm,message,Modal,Form } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
import moment from 'moment';

const Option = Select.Option;
const FormItem = Form.Item;

export default class BuildMeeting extends Component {
  constructor(props) {
  	super(props);
  	const { user } = OAglobal;
  	this.state = {
  	  data: {
        time:moment().locale('en').utcOffset(0).format().slice(0,10),
        title:null,
        type:'部门例会',
      },
      visible: false
  	}
  	this.submit = this.submit.bind(this)
  }
  showModal () {
    this.setState({
      visible: true
    })
  }
  cancel () {
    this.setState({
      visible: false
    })
  }
  setRole(value) {
    let { type } = this.state.data;
    type = value;
    this.state.data.type = type;
  }
  setTitle(ev) {
    let { title } = this.state.data;
    title = ev.target.value;
    this.state.data.title = title
  }
  setDate(date,dateString) {
    let { time } = this.state.data;
    time = dateString;
    this.state.data.time = time
  }
  submit() {
  	const data = this.state.data;
  	let val = true;
  	for(let x in data) {
  	  if (data[x] !== 0 && data[x] == null) {
  	  	val = false;
  	  	break;
  	  }
  	}
  	if (val) {
      this.props.createMeeting(this.state.data)
  	  this.setState({
  	    data: {
          time:moment().locale('en').utcOffset(0).format().slice(0,10),
          meeting:null,
          role:'部门例会'
        }
  	  });
      this.cancel();
  	}else {
  	  message.error('填写内容不能为空');
  	}
  }

  render () {
    return (
      <div>
        <Button type="primary" onClick={() => this.showModal()}>
          发起会议
        </Button>
        <Modal
          visible={this.state.visible}
          title="发起会议"
          onCancel={() => this.cancel()}
          footer={[
            <Button key="back" size="large" onClick={() => this.cancel()}>取消发起</Button>,
            <Button type="primary" key="submit" size="large" onClick={() => this.submit()}>发起会议</Button>
          ]}
        >
          <Form>
            <FormItem
              label="会议时间"
              required="true"
              colon={true}
            >
              <DatePicker format="YYYY-MM-DD HH:mm:ss" onChange={(date,dateString) => this.setDate(date,dateString)} showTime/>
            </FormItem>
            <FormItem
              label="会议名称"
              required="true"
              colon={true}
            >
              <Input onChange={(ev) => this.setTitle(ev)} />
            </FormItem>
            <FormItem
              label="会议分类"
              required="true"
              colon={true}
            >
              <Select onChange={(value) => this.setRole(value)} defaultValue="部门例会" style={{width:120}}>  
                {
                  OAglobal.meetingType.map(function(item) {
                    return <Option key={item.key} value={item.value}>{item.text}</Option>
                  })
                }
              </Select>
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
}